<template>
  <div>
    <!-- 搜索 -->
    <div class="form_search">
      <div class="form_content">
        <form action="/home" class="form">
          <van-search
            v-model="value"
            show-action
            placeholder="请输入搜索关键词"
            @input="SearchInfo"
            @search="onSearch"
            @cancel="onCancel"
            :autofocus="true"
          >
            <template #left>
              <van-icon
                name="arrow-left"
                class="icon_left"
                @click="$router.back()"
              />
            </template>
          </van-search>
        </form>
      </div>
      <div></div>
    </div>
    <!-- 搜索 -->
    <SearchInfo
      :value="value"
      v-if="flag"
      @showSearchList="showSearchlist"
      @searchHistoryList="searchHistory"
      :ten="ten"
    ></SearchInfo>
    <SearchList
      v-else
      @updateSearch="SearchInfo"
      :finished="finish"
      :loading.sync="load"
    ></SearchList>
  </div>
</template>

<script>
import SearchInfo from "./SearchInfo.vue";
import SearchList from "./SearchList.vue";
import { debounce } from "@/utils/debounce";
import { searchInfo } from "@/api/api";
// import { mapState } from 'vuex'
export default {
  name: "search",
  components: {
    SearchInfo,
    SearchList,
  },
  data() {
    return {
      skip: 0,
      limit: 10,
      value: "",
      flag: true, //flag 和 ten 是控制 search的两个子组件显示与隐藏
      ten: 0,
      finish: false,
      load: false,
      searchlist: [],
    };
  },
  computed: {
    // ...mapState(['searchList'])
  },
  methods: {
    searchHistory(title) {
      this.value = title;
      this.SearchInfo(title);
      this.flag = false;
    },
    //点击enter时做的事情
    onSearch() {
      this.flag = false;
    },
    onCancel() {
      //点击取消时触发
    },
    SearchInfo: debounce(function (title) {
      // let { value } = this;
      let value = this.value || title;
      if (!value && value.length == "") {
        this.flag = true;
        this.searchlist = [];
        return false;
      } else {
        let { skip, limit } = this;
        searchInfo(value, skip, limit).then((res) => {
          if (res.data.code == 0) {
            this.searchlist.push(...res.data.data);
            let len = this.searchlist.length;
            this.$store.commit("getSearchList", this.searchlist);
            if (len >= res.data.count) {
              // console.log(111);
              this.finish = true;
            } else {
              // console.log("加载中...");
              this.load = false;
              this.skip = len;
            }
          }
          this.ten = 5;
        });
      }
    }, 500),
    showSearchlist(val, title) {
      this.flag = Boolean(val);
      this.value = title;
    },
  },
};
</script>

<style lang="less" scoped>
.form_search {
  position: fixed;
  top: 0;
  left: 0;
  height: 55px;
  width: 375px;
  z-index: 999;
}
.form_content {
  display: flex;
  justify-content: space-between;
}
.form {
  width: 100%;
}
</style>
